const env = import.meta.env
const APP_BASEURL = env.VITE_APP_BASEURL

let linkElement_waveLoadingText = null
let loadingBox_waveLoadingText = null
/**
 * 页面加载动画_wave loading 文本，
 * loading 文本盒子使用了 绝对定位居中
 * 样式代码来源：https://blog.csdn.net/qq_41581588/article/details/128869228（有进行相应修改）
 *
 * @param el 要添加到的元素
 */
export const addLoading_waveLoadingText = (el) => {
    // css <link rel="stylesheet" href="style.css">
    linkElement_waveLoadingText = document.createElement("link");
    linkElement_waveLoadingText.rel = "stylesheet"
    linkElement_waveLoadingText.href = APP_BASEURL + "/loading/waveLoadingText.css"
    document.head.appendChild(linkElement_waveLoadingText)
    // 加载动画盒子
    loadingBox_waveLoadingText = document.createElement('div');
    loadingBox_waveLoadingText.className = 'loading';
    const loadingText = 'loading...'
    for (let i = 0; i < 10; i++) {
        let spanElement = document.createElement('span');
        spanElement.innerHTML = loadingText[i]
        spanElement.className = 'cube'
        loadingBox_waveLoadingText.appendChild(spanElement)
    }
    el.appendChild(loadingBox_waveLoadingText);
}

/**
 * 移除页面加载动画_wave loading 文本
 *
 * @param el 添加到的元素
 */
export const removeLoading_waveLoadingText = (el) => {
    setTimeout(() => {
        loadingBox_waveLoadingText.style.opacity = 0
        setTimeout(() => {
            el.removeChild(loadingBox_waveLoadingText)
            document.head.removeChild(linkElement_waveLoadingText)
            loadingBox_waveLoadingText.style.display = 'none'
        }, 1000)
    }, 1000);
}